<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .photo-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .photo-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        .photographer-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
        }
        .category-pill {
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 12px;
            background-color: rgba(255,255,255,0.9);
            color: #333;
            display: inline-block;
            margin-right: 6px;
            margin-bottom: 6px;
        }
        .search-bar {
            border-radius: 20px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- 状态栏和导航栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部搜索栏 -->
        <div class="px-4 py-3 bg-white sticky top-0 z-10 shadow-sm">
            <a href="search.html" class="flex items-center search-bar px-4 py-2">
                <i class="fas fa-search text-gray-400 mr-2"></i>
                <div class="bg-transparent w-full outline-none text-sm text-gray-400">搜索约拍、摄影师、风格...</div>
            </a>
        </div>
        
        <!-- 分类标签 -->
        <div class="px-4 py-3 overflow-x-auto flex whitespace-nowrap">
            <div class="bg-blue-500 text-white rounded-full px-4 py-1 mr-2 text-sm">全部</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">人像</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">婚纱</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">写真</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">日系</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">古风</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">街拍</div>
            <div class="bg-gray-200 rounded-full px-4 py-1 mr-2 text-sm">私房</div>
        </div>
        
        <!-- 轮播广告 -->
        <div class="px-4 py-3">
            <div class="rounded-xl overflow-hidden relative h-40">
                <img src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="w-full h-full object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                    <div class="text-white font-bold">春季约拍特惠</div>
                    <div class="text-white text-sm">限时5折，预约立减100元</div>
                </div>
            </div>
        </div>
        
        <!-- 热门约拍 -->
        <div class="px-4 py-3">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold">热门约拍</h2>
                <a href="search.html" class="text-blue-500 text-sm">查看全部</a>
            </div>
            
            <div class="grid grid-cols-2 gap-3">
                <!-- 约拍卡片1 -->
                <a href="portfolio.html" class="photo-card bg-white block">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="约拍照片">
                        <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">热门</div>
                    </div>
                    <div class="p-2">
                        <div class="text-sm font-bold truncate">日系小清新写真</div>
                        <div class="text-xs text-gray-500 mb-1">上海 · 2km</div>
                        <div class="flex justify-between items-center">
                            <div class="text-red-500 font-bold">¥399起</div>
                            <div class="text-xs text-gray-500">已约10次</div>
                        </div>
                    </div>
                </a>
                
                <!-- 约拍卡片2 -->
                <a href="portfolio.html" class="photo-card bg-white block">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="约拍照片">
                    </div>
                    <div class="p-2">
                        <div class="text-sm font-bold truncate">复古港风人像</div>
                        <div class="text-xs text-gray-500 mb-1">上海 · 5km</div>
                        <div class="flex justify-between items-center">
                            <div class="text-red-500 font-bold">¥599起</div>
                            <div class="text-xs text-gray-500">已约8次</div>
                        </div>
                    </div>
                </a>
                
                <!-- 约拍卡片3 -->
                <a href="portfolio.html" class="photo-card bg-white block">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="约拍照片">
                    </div>
                    <div class="p-2">
                        <div class="text-sm font-bold truncate">街头时尚风格</div>
                        <div class="text-xs text-gray-500 mb-1">上海 · 3km</div>
                        <div class="flex justify-between items-center">
                            <div class="text-red-500 font-bold">¥499起</div>
                            <div class="text-xs text-gray-500">已约5次</div>
                        </div>
                    </div>
                </a>
                
                <!-- 约拍卡片4 -->
                <a href="portfolio.html" class="photo-card bg-white block">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="约拍照片">
                    </div>
                    <div class="p-2">
                        <div class="text-sm font-bold truncate">夏日海边写真</div>
                        <div class="text-xs text-gray-500 mb-1">上海 · 10km</div>
                        <div class="flex justify-between items-center">
                            <div class="text-red-500 font-bold">¥699起</div>
                            <div class="text-xs text-gray-500">已约3次</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        
        <!-- 推荐摄影师 -->
        <div class="px-4 py-3">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold">推荐摄影师</h2>
                <a href="search.html" class="text-blue-500 text-sm">查看全部</a>
            </div>
            
            <div class="overflow-x-auto">
                <div class="flex space-x-4 pb-2">
                    <!-- 摄影师1 -->
                    <a href="portfolio.html" class="flex flex-col items-center w-20">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="photographer-avatar">
                            <div class="absolute -bottom-1 -right-1 bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                                <i class="fas fa-check"></i>
                            </div>
                        </div>
                        <div class="text-xs font-bold mt-1 text-center">张摄影</div>
                        <div class="text-xs text-gray-500">人像专家</div>
                    </a>
                    
                    <!-- 摄影师2 -->
                    <a href="portfolio.html" class="flex flex-col items-center w-20">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="photographer-avatar">
                        <div class="text-xs font-bold mt-1 text-center">李写真</div>
                        <div class="text-xs text-gray-500">日系风格</div>
                    </a>
                    
                    <!-- 摄影师3 -->
                    <a href="portfolio.html" class="flex flex-col items-center w-20">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="photographer-avatar">
                        <div class="text-xs font-bold mt-1 text-center">王大师</div>
                        <div class="text-xs text-gray-500">婚纱摄影</div>
                    </a>
                    
                    <!-- 摄影师4 -->
                    <a href="portfolio.html" class="flex flex-col items-center w-20">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="photographer-avatar">
                        <div class="text-xs font-bold mt-1 text-center">陈影像</div>
                        <div class="text-xs text-gray-500">时尚街拍</div>
                    </a>
                    
                    <!-- 摄影师5 -->
                    <a href="portfolio.html" class="flex flex-col items-center w-20">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="photographer-avatar">
                        <div class="text-xs font-bold mt-1 text-center">赵光影</div>
                        <div class="text-xs text-gray-500">古风专家</div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 最新作品 -->
        <div class="px-4 py-3">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold">最新作品</h2>
                <a href="portfolio.html" class="text-blue-500 text-sm">查看全部</a>
            </div>
            
            <div class="grid grid-cols-3 gap-1">
                <a href="portfolio.html"><img src="https://images.unsplash.com/photo-1513379733131-47fc74b45fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-28 object-cover rounded-md"></a>
                <a href="portfolio.html"><img src="https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-28 object-cover rounded-md"></a>
                <a href="portfolio.html"><img src="https://images.unsplash.com/photo-1534008897995-27a23e859048?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-28 object-cover rounded-md"></a>
                <a href="portfolio.html"><img src="https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-28 object-cover rounded-md"></a>
                <a href="portfolio.html"><img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-full h-28 object-cover rounded-md"></a>
                <a href="portfolio.html"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-1.2.1&auto=format&fit=crop&w=662&q=80" class="w-full h-28 object-cover rounded-md"></a>
            </div>
        </div>
    </div>
    
    <script>
        // 加载组件
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 创建底部导航栏
            const bottomNav = document.createElement('div');
            bottomNav.className = 'fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 h-16 flex justify-around items-center px-2 z-10';
            bottomNav.innerHTML = `
                <a href="home.html" class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="search.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-compass text-xl"></i>
                    <span class="text-xs mt-1">发现</span>
                </a>
                <a href="publish.html" class="flex flex-col items-center">
                    <div class="bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center">
                        <i class="fas fa-plus text-xl"></i>
                    </div>
                </a>
                <a href="messages.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-comment text-xl"></i>
                    <span class="text-xs mt-1">消息</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            `;
            document.body.appendChild(bottomNav);
        });
    </script>
</body>
</html> 